<template>
  <div class="van-skeleton-qs">
    <div class="van-skeleton-title"></div>
    <template v-for="item of 5">
      <div
        class="van-skeleton-item"
        :key="item"
      ></div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'VanSkeleton',
  // props: {
  //   row: {
  //     type: [String, Number],
  //     default: 5
  //   }
  // }
  methods: {
    test () {
    }
  },
  computed: {
    user () {
      return this.text
    }
  }
}
</script>

<style lang="less">
.van-skeleton-qs {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  // bottom: 0;
  padding: 16px;
  box-sizing: border-box;
  background-color: #fff;

  .van-skeleton-title {
    height: 16px;
    margin-right: 55%;
    background-color: #f2f3f5;
    transition: all 2s;
    animation: reflective 3s infinite linear;
  }

  .van-skeleton-item {
    height: 16px;
    margin-top: 16px;
    background-color: #f2f3f5;
    transition: all 2s;
    animation: reflective 3s infinite linear;

    &:last-child {
      margin-right: 35%;
    }
  }
}

@keyframes reflective {
  from {
    background-color: #f2f3f5;
  }
  to {
    background-color: #f9f9f9;
  }
}
</style>
